// All input types that use some sort of text box
@mixin text-inputs {
  input[type='text'],
  input[type='password'],
  input[type='tel'],
  input[type='email'],
  input[type='number'],
  input[type='number'],
  input[type='datetime-local'],
  input[type='month'],
  input[type='search'],
  input[type='time'],
  input[type='url'],
  input[type='week'],
  input[type='date'],
  textarea {
    @content;
  }
}

// Basic form should be a 2-grid of label-element pairs
form {
  display: grid;
  grid: auto / auto;

  >input,
  >textarea,
  >.input {
    margin-bottom: 20px;
  }

  @media #{$sm} {
    grid: auto / auto 1fr;

    grid-gap: 20px 20px;

    >input,
    >textarea,
    >.input {
      align-self: center;
    }

    >label {
      text-align: right;
      align-self: start;
    }

    >.description {
      grid-column-start: span 2;
      text-align: left;
    }

    >.submit {
      grid-column-start: 2;
      text-align: left;
      margin-bottom: 40px;
    }
  }

  @include text-inputs {
    width: 100%;
    max-width: 300px;
  }
}

@include text-inputs {
  padding: 5px;
}

$button-padding: 10px;
$button-y-padding: $button-padding;
$button-x-padding: $button-padding * 2;
$button-press-move: 1px;
$button-shadow: 1px 1px 1px #000;

button {
  padding: $button-padding ($button-padding * 2);
  color: $accent-text;
  background-color: $accent-background;
  border: 1px solid $accent-background;
  box-shadow: $button-shadow;
  border-radius: 5px;

  // Create "3D" effect of pressing button by moving text when it is active and moving box shadow inside
  &:active {
    padding: ($button-y-padding + $button-press-move) ($button-x-padding - $button-press-move) ($button-y-padding - $button-press-move) ($button-x-padding + $button-press-move);
    box-shadow: inset $button-shadow;
  }

  @mixin button-color($base-color) {
    $bg-color: darken($base-color, 10%);
    background-color: $bg-color;
    color: darken($base-color, 60%);
    border-color: $bg-color;
  }

  &.button-info {
    @include button-color($info-color);
  }

  &.button-warning {
    @include button-color($warning-color);
  }

  &.button-danger {
    @include button-color($danger-color);
  }
}
